<template>
	<view class="arefund" :style="{height:wh+'px'}">
		<!-- 上 -->
		<view class="aref-top">
			<view class="top-left">
				<view class="left-title">退款类型</view>
				<view class="left-price">申请金额</view>
				<view class="left-title">实现退金</view>
			</view>
			<view class="top-right">
				<view class="right-title">全额退款</view>
				<view class="right-price">￥{{price}}</view>
				<view class="right-reprice"><text class="price">￥{{price}}</text>微信支付原路退回</view>
			</view>
		</view>
		<!-- 中 -->
		<view class="aref-main">
			<view class="main-title">退款原因</view>
			<u-input v-model="textvalue" type="textarea" :clearable="false" height="242" auto-height="false"
				placeholder="请描述您的详细退款原因,有助于更好的维护您的权益" maxlength="100" />
			<view class="inputxt">{{textvalue.length}}/100</view>
		</view>
		<!-- 下 -->
		<view class="aref-bom">
			<button class="btn" @click="getRefund">确认提交</button>
		</view>
	</view>
</template>

<script>
	import { ResRefund } from '@/untils/api.js'
	export default {
		data() {
			return {
				textvalue: '',
				wh: '',
				price: '',
				id: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.price = option.price
			// 获取页面可操作高度
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight

		},
		methods: {
			async getRefund() {
				let rerundObj = {
					desc: this.textvalue,
					id: this.id
				}
				const { data: res } = await ResRefund(rerundObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.textvalue = ''
				uni.navigateBack({ delta: 2 })
				console.log(res, '退款申请');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.arefund {
		background-color: #F7F7F7;
		padding: 23rpx 25rpx 0;

		.aref-top,
		.aref-main {
			border-radius: 30rpx;
			background-color: #fff;
		}

		.aref-top {
			height: 279rpx;
			padding: 40rpx 24rpx 40rpx 36rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;

			.top-left {
				.left-price {
					margin: 41rpx 0 36rpx;
				}
			}

			.top-right {
				text-align: right;

				.right-price {
					margin: 41rpx 0 36rpx;
					font-size: 30rpx;
					color: #FB8629;
				}

				.price {
					color: #FB8629;
					margin-right: 10rpx;
				}
			}
		}

		// 中
		.aref-main {
			padding: 37rpx 28rpx 41rpx;
			margin-top: 24rpx;
			position: relative;

			.main-title {
				margin-bottom: 32rpx;
			}

			/deep/.u-input__input {
				background-color: #F7F7F7;
				padding: 22rpx 22rpx 0 23rpx;
			}

			.inputxt {
				position: absolute;
				bottom: 64rpx;
				right: 52rpx;
				font-size: 22rpx;
				color: #979797;
			}


		}

		// 下
		.aref-bom {
			margin-top: 83rpx;

			.btn {
				width: 375rpx;
				height: 85rpx;
				font-size: 32rpx;
				background-color: #01C3A8;
				color: #fff;
				border-radius: 43rpx;
			}
		}
	}
</style>
